<template>
  <div class="exam">

    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="题目信息">
        <el-input v-model="formInline.name" placeholder="请输入题目信息"></el-input>
      </el-form-item>
      <el-form-item label="测试点">
        <el-input v-model="formInline.tel" placeholder="请输入测试点"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getAnswerInfo">查询</el-button>
        <el-button type="warning" size="small" @click="resetAnswerInfo">重置</el-button>
        <el-button type="success" size="small" @click="add">添加题库</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="pagination.records" border :row-class-name="tableRowClassName" size="small">
      <el-table-column prop="question" label="题目信息"></el-table-column>
      <el-table-column prop="type" label="题目类型" width="200" :formatter="typeFormatter">

      </el-table-column>
      <el-table-column prop="subject" label="测试点" width="150"></el-table-column>
      <el-table-column prop="level" label="难度等级"  width="133">
        <template slot-scope="scope">
        <span v-if="scope.row.level">
          {{ scope.row.level }}级
        </span>
        </template>
      </el-table-column>
      <!--<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="update(scope.row.studentId)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteById(scope.row.questionId)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pagination : {
          //分页后的考试信息
          current : 1 , //当前页
          total : null , //记录条数
          size : 10 //每页条数
        } ,
        formInline : {
          name : '' ,
          tel : ''
        } ,
      };
    } ,
    created () {
      this.getAnswerInfo ();
    } ,
    methods : {
      getAnswerInfo () {
        //分页查询所有试卷信息
        this.$axios (
          {
            methods : 'get' ,
            url : '/api/answers' ,
            params : {
              page : this.pagination.current ,
              size : this.pagination.size ,
              name : this.formInline.name ,
              tel : this.formInline.tel
            }
          }
        )
          .then ( res => {
            this.pagination = res.data.data;
            console.log ( res );
          } )
          .catch ( error => {
          } );
      } ,
      //改变当前记录条数
      handleSizeChange ( val ) {
        this.pagination.size = val;
        this.getAnswerInfo ();
      } ,
      //改变当前页码，重新发送请求
      handleCurrentChange ( val ) {
        this.pagination.current = val;
        this.getAnswerInfo ();
      } ,
      tableRowClassName ( { row , rowIndex } ) {
        if ( rowIndex % 2 == 0 ) {
          return "warning-row";
        } else {
          return "success-row";
        }
      } ,
      add () { //增加题库
        this.$router.push ( { path : '/addAnswerChildren' } )
      } ,
      //规范化类型   默认有四个参数（row, column, cellValue, index）详情可以查看elmentUI官网
      typeFormatter(row){
        switch(row.type){
          case '1':
            return '选择题'
          case '2':
            return '简答题'
          default:
            return '判断题'
        }
      },


      deleteById ( questionId ) { //删除当前咨询者
        this.$confirm ( "确定删除当前试题吗？删除后无法恢复" , "Warning" , {
          confirmButtonText : '确定删除' ,
          cancelButtonText : '算了,留着吧' ,
          type : 'danger'
        } ).then ( () => { //确认删除
          this.$axios ( {
            url : `/api/student/${ questionId }` ,
            method : 'delete' ,
          } ).then ( res => {
            this.getStudentInfo ()
          } )
        } ).catch ( () => {

        } )
      } ,

      update () {

      },
      resetAnswerInfo(){
        this.formInline.name = ''
        this.formInline.tel = ''
        this.getAnswerInfo()
      }
    }
  };
</script>
<style lang="scss" scoped>
  .exam {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }

    .el-table tr {
      background-color: #DD5862 !important;
    }
  }

  .el-table .warning-row {
    background: #000 !important;

  }

  .el-table .success-row {
    background: #DD5862;
  }

</style>
